<template>
  <NstdSelect
    v-model="value"
    v-bind="attrs"
    style="width: 100%"
    @change="props.change ? props.change($event) : false"
    @visible-change="props.visibleChange ? props.visibleChange($event) : false"
    @remove-tag="props.removeTag ? props.removeTag($event) : false"
    @clear="props.clear ? props.clear() : false"
    @blur="props.blur ? props.blur($event) : false"
    @focus="props.focus ? props.focus($event) : false"
  >
    <NstdOption v-for="item in options" :key="item[valueFiled]" :label="item[labelFiled]" :value="item[valueFiled]" />
  </NstdSelect>
</template>

<script setup>
  import { ref, watch } from 'vue';
  const emit = defineEmits(['update:modelValue']);
  const attrs = useAttrs();
  const props = defineProps({
    modelValue: {
      type: [String, Array],
      default: () => ''
    },
    options: {
      type: Array,
      default: () => []
    },
    valueFiled: {
      type: String,
      default: 'value'
    },
    labelFiled: {
      type: String,
      default: 'label'
    },
    change: {
      type: Function,
      default: () => () => {}
    },
    visibleChange: {
      type: Function,
      default: () => () => {}
    },
    removeTag: {
      type: Function,
      default: () => () => {}
    },
    clear: {
      type: Function,
      default: () => () => {}
    },
    blur: {
      type: Function,
      default: () => () => {}
    },
    focus: {
      type: Function,
      default: () => () => {}
    }
  });
  const value = ref(props.modelValue);
  //监听父组件的值
  watch(
    () => props.modelValue,
    () => {
      value.value = props.modelValue;
    }
  );
  // 通过emit将值传递给父组件
  emit('update:modelValue', value);
</script>
